<template>
    <view class="container">
        <u-navbar title="我的反馈" title-bold>
            <view slot="right" class="u-margin-right-20" style="color: #fc4f75" @click="submitAdvice">提建议</view>
        </u-navbar>
        <z-paging ref="paging" v-model="list" @query="queryList">
            <block v-for="item in list" :key="item.id">
                <view class="feedback" @click="navi2detail(item.id)">
                    <view class="">
                        <view class="">
                            <text class="title">{{ item.typeName }}</text>
                            <text class="time">{{ item.addTime }}</text>
                        </view>
                        <view class="u-flex u-row-between u-col-center">
                            <view class="u-line-1 desc">{{ item.content }}</view>
                            <view class="icon icon-right"></view>
                        </view>
                    </view>
                    <view class="status status-0" v-if="item.status === 0">{{ item.statusName }}</view>
                    <view class="status status-1" v-if="item.status === 1">{{ item.statusName }}</view>
                    <view class="status status-2" v-if="item.status === 2">{{ item.statusName }}</view>
                </view>
            </block>
        </z-paging>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store'

const paging = ref<any>(null)
const list = ref<Array<any>>([])
const userStore = useUserStore()

const queryList = (pageNo: number) => {
    uni.$u.$api.BaseApi.queryAppFeedbackListPage({
        merchantId: userStore.userInfo.merchantId,
        current: pageNo
    })
        .then((res: any) => {
            paging.value?.complete(res.records)
        })
        .catch(() => {
            paging.value?.complete(false)
        })
}

function submitAdvice() {
    uni.$u.$MRouter.feedback.to()
}

function navi2detail(id: string) {
    uni.$u.$MRouter.feedDetail.to({ id })
}
</script>

<style scoped lang="scss">
.feedback {
    padding: 30rpx;
    background-color: $uni-bg-color;
    margin-top: 20rpx;
    position: relative;
    .title {
        font-size: 30rpx;
        font-weight: bold;
    }
    .time {
        margin-left: 20rpx;
        font-size: 24rpx;
    }
    .desc {
        font-size: 26rpx;
        line-height: 60rpx;
    }
    .status {
        position: absolute;
        top: 10rpx;
        right: 30rpx;
        border: 1rpx solid white;
        padding: 6rpx 30rpx;
        border-radius: 0 40rpx 0 40rpx;
    }
    .status-0 {
        color: white;
        background-color: #ff6666;
    }
    .status-1 {
        color: #ff2442;
        background-color: #ffd9d9;
    }
    .status-2 {
        color: black;
        background-color: #ffe5e5;
    }
}
</style>
